<template>
  <div class="partnerlist">
    <div class="list">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="partnerid" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="70" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="agency_level"
          label="代理级别"
          width="126"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="agency_area"
          label="代理区域"
          width="154"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mange_benefit"
          label="管理津贴"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cash_money"
          label="提现金额"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sale_incentive"
          label="销售奖励"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="total_money"
          label="总金额"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="money_opera"
          label="操作"
          width="192"
          align="center"
        >
          <el-button type="text" @click="dialogTableVisible = true"
            >钱包明细</el-button
          >
          <p class="cwdk">财务打款</p>
        </el-table-column>
      </el-table>

      <!-- 钱包明细弹框 -->
      <el-dialog title="钱包明细" :visible.sync="dialogTableVisible">
        <div class="hx"></div>
        <div>
          <table class="all_tb2">
            <tr>
              <th>总金额</th>
              <th>总销售奖励</th>
              <th>总管理津贴</th>
              <th>总提现金额</th>
              <th>
                <div class="name_input2">
                  收支类型：<input type="text" placeholder="全部" />
                </div>
              </th>
              <th>
                <!-- 选择日期范围 -->
                收支日期：
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </th>
            </tr>
            <tr>
              <td>0元</td>
              <td>0元</td>
              <td>0元</td>
              <td>0元</td>
            </tr>
          </table>
        </div>

        <!-- 单选、个人信息 -->
        <div class="partnerlist_xx">
          <span class="srzc">支出\收入:</span>
          <el-radio v-model="radio" label="1">全部</el-radio>
          <el-radio v-model="radio" label="2">支出(10000)元</el-radio>
          <el-radio v-model="radio" label="3">收入(0元)</el-radio>
          <!-- <span class="srzc">个人信息</span> -->
          <el-tooltip
            content="暂无个人信息"
            placement="right"
            effect="light"
            :class="'artnerlist_grxx'"
          >
            <el-button>个人信息</el-button>
          </el-tooltip>

          <!-- 导出数据到Excel、 查询、重置-->
          <router-link to="" tag="button" :class="'withdraw_excel3'"
            >导出数据到Excel</router-link
          >
          <router-link to="" tag="div" :class="'reset3'">
            <i class="el-icon-refresh-right"></i>重置
          </router-link>
          <!--  @click.native="reset"      @click.native="search" -->
          <router-link to="" tag="div" :class="'found3'">
            <i class="el-icon-search"></i>查询
          </router-link>
        </div>

        <!-- 钱包明细表格 -->
        <el-table :data="gridData" border style="width: 100%">
          <el-table-column
            prop="wallet_id"
            label="ID"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_name"
            label="姓名"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_tel"
            label="电话"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="wallet_money"
            label="金额"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="income_expend"
            label="收入支出"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payment_type"
            label="收支类型"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payment_date"
            label="收支时间"
            width="220"
            align="center"
          >
          </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1"
        >
        </el-pagination>
<!-- 
        <div class="hx2"></div>
        <div slot="footer" class="partner-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false"
            >确 定</el-button
          >
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {Bus} from "../../Bus/index"
import { apiGeWallettInfo } from "@/api/wallet";

export default {
  name: "PartnerList",
  components: {
    // riqi
  },

  data() {
    return {
      tableData: [
        {
          partnerid: 1,
          name: "王小虎",
          tel: 13158850832,
          agency_level: "市服务站",
          agency_area: "上海市普陀区",
          mange_benefit: 200333,
          cash_money: 100,
          sale_incentive: 200,
          total_money: 555555,
          // money_opera:'钱包明细'
        },
      ],
      value1: "",
      radio: "1",

      // 分页
      currentPage4: 1,

      // 弹框数据
      gridData: [
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
      ],
      dialogTableVisible: false,
    };
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 点击钱包明细
    // dialogTableVisible(val) {
    //   console.log(val);
    //   apiGeWallettInfo({
    //     nickname: val,
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },
  },
  mounted(){
     console.log(this.tableData[0].agency_area);
    Bus.$on("tabledata",(value)=>{
       this.tableData[0].agency_area = value;
       
       console.log(this.tableData[0].agency_area);
    })
  }
};
</script>

<style >
/* .partnerlist .hx2 {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: rgb(218, 215, 215);
} */
/* 分页 */
.partnerlist .el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  float: right;
  margin-top: 5px;
}

/* 导出到excel表 */
.withdraw_excel3 {
  padding: 5px 15px;
  color: white;
  outline: none;
  border: none;
  margin-right: 20px;
  cursor: pointer;
  float: left;
  background-color: #409eff;
}

/* 查询、重置 */
.reset3,
.found3 {
  outline: 1px solid rgb(151, 147, 147);
  width: 60px;
  height: 25px;
  font-size: 13px;
  line-height: 25px;
  text-align: center;
  margin-left: 15px;
  cursor: pointer;
  float: right;
}

/* 个人信息 */
.artnerlist_grxx {
  width: 100px;
  height: 100px;
}
.partnerlist_xx .el-button {
  cursor: pointer;
  background: #fff;
  border: none;
  color: #409eff;
  transition: 0.1s;
  font-size: 14px;
  height: 25px;
  float: left;
  margin-left: 50px;
}

/* 支出\收入 */
.partnerlist_xx .srzc {
  float: left;
  margin-right: 15px;
  margin-left: 10px;
}

/* 单选 */
.partnerlist_xx .el-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 10px;
  float: left;
  margin-top: 7px;
}
.partnerlist_xx {
  width: 100%;
  height: 30px;
  margin-top: 120px;
  margin-bottom: 20px;
  /* outline: 1px solid #dcdfe6; */
}

/* 日期选择 */
.partnerlist .el-range-editor.el-input__inner {
  display: inline-flex;
  align-items: center;
  padding: 0px 10px;
  height: 30px;
  width: 280px;
}

/* 收支类型 查询 */
.partnerlist .name_input2 {
  font-size: 14px;
  margin-top: 5px;
}
.partnerlist .name_input2 input {
  width: 150px;
  height: 25px;
  padding-left: 5px;
  border: none;
  outline: 1px solid #dcdfe6;
}

/* 总金额.... */
.partnerlist .all_tb2 {
  width: 100%;
  height: 40px;
  float: left;
  margin-top: 20px;
}
.partnerlist .el-dialog__body {
  padding: 10px 20px 50px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  height: auto;
}
.partnerlist .hx {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background-color: rgb(218, 215, 215);
}
.partnerlist .el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  box-sizing: border-box;
  width: 95%;
}
.partnerlist .el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  float: left;
  margin-left: 25px;
}
.partnerlist .el-dialog__header {
  padding: 20px 0px 10px;
  margin-bottom: 20px;
}
/* 钱包明细 */

.all_tb td {
  text-align: center;
}
.all_tb th {
  text-align: center;
}
.el-button--text {
  margin-right: 15px;
  color: #409eff;
  background: 0 0;
  padding: 0 10px;
}
.cwdk {
  color: rgb(218, 215, 215);
  display: inline-block;
}
.wallet {
  color: #4bc9c9;
  border: none;
  margin-right: 15px;
  cursor: pointer;
  background-color: white;
}
.partnerlist {
  margin-left: 20px;
  margin-top: 70px;
  width: 97%;
}
</style>